/* vue */
import { defineComponent } from "vue";
/* components */
import SettingGPTViewDialog from "@gpt/components/dialog"
import WikiTreeDialogTree from "@gpt/components/wiki-tree-dialog/tree"
/* scss */
import "@gpt/components/wiki-tree-dialog/index.scss"

type SettingGPTViewDialogComponent = InstanceType<typeof SettingGPTViewDialog>
type WikiTreeDialogTreeComponent = InstanceType<typeof WikiTreeDialogTree>

enum WikiTreeDialogEventEnum {
  Confirm = 'confirm'
}

export default defineComponent({
  name: "WikiTreeDialog",
  props: {
    onConfirm: {
      type: Function
    }
  },
  data() {
    return {
      value: [] as string[]
    }
  },
  computed: {
    wikiTreeDialog(): SettingGPTViewDialogComponent {
      return this.$refs.WikiTreeDialog as SettingGPTViewDialogComponent;
    },
    wikiTreeDialogTree(): WikiTreeDialogTreeComponent {
      return this.$refs.WikiTreeDialogTree as WikiTreeDialogTreeComponent;
    },
    confirmText() {
      return '确定应用'
    }
  },
  methods: {
    open() {
      this.wikiTreeDialog.open();
    },
    close() {
      this.wikiTreeDialog.close();
    },
    setValue(value: string[]) {
      this.value = value;
    },
    onConfirmHandler() {
      const checkedKeys = this.wikiTreeDialogTree?.getCheckedKeys()
      this.$emit(WikiTreeDialogEventEnum.Confirm, checkedKeys)
    }
  },
  render() {
    return (
      <SettingGPTViewDialog
        width="700px"
        title="知识库设置"
        ref="WikiTreeDialog"
        className="wiki-tree-dialog"
        confirmText={this.confirmText}
        onConfirm={this.onConfirmHandler}
      >
        <div class="wiki-tree-dialog-content">
          <div class="wiki-tree-dialog-tip">
            请选择知识库范围
          </div>
          <div class="wiki-tree-dialog-tree-main">
            <WikiTreeDialogTree 
              ref="WikiTreeDialogTree"
              value={this.value}
            />
          </div>
        </div>
      </SettingGPTViewDialog>
    )
  }
})